<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
    <title>全部订单</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="stylesheet" type="text/css" href="../js/mint-ui/mint-ui.css"/>
    <link rel="stylesheet" type="text/css" href="./css/member_order.css">
</head>

<body>
    <div class="member_con" id="app" v-cloak>
      <div class="header">
          <span class="member_fanhui" @click="goback()">返回</span>{{typeTitle}}
      </div>

      <div class="order_nav">
          <ul id="shangpin_type" v-show="types&&types.length>0">
              <li v-for="list in types" :key="list.typeid" :class="{order_current:typeid==list.typeid}" @click="changeTab(list.typeid, list.type)">{{list.name}}<em v-show="list.typeid" style="display: none;"></em></li>
          </ul>
      </div>

      <div class="page-con" v-show="types&&types.length>0">
        <div v-for="list in types" :key="list.typeid">
          <transition :name="transitionName">
            <div v-show="typeid==list.typeid" class="page-con-items">
              <div class="order_audit_list" v-if="typeid===2">
                <template v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="8">
                <ul v-if="orderList&&orderList.length>0">
                  <li v-for="(order,index) in orderList" :key="order.ordersId">
                      <template v-if="order.isOrderSuccess === 'WAIT_DEAL'">
                      <div class="order_list_top">{{order.createTime}}<span>正在查询商品</span></div>
                      <div class="order_box">
                        <div class="order_h3">{{order.brandName}} {{order.goodsName}} {{order.attrValue}}</div>
                        <div class="order_tips">温馨提示：您提交的商品正在查询中，请稍后前往此页查看，我们也会将查询结果下发至您的手机，请注意查收。</div>
                        <a class="order_dot" :href="'tel:' + order.communityPhone">联系网点</a>
                      </div>
                      </template>
                      <template v-else-if="order.isOrderSuccess === 'SUCCESS'">
                      <div class="order_list_top">{{order.createTime}}<span>商品查询结果</span></div>
                      <div class="order_box">
                        <div class="order_h3">{{order.brandName}} {{order.goodsName}} {{order.attrValue}}</div>
                        <div class="order_tips1">商品信息获取成功，客服已与您取得联系！</div>
                        <a class="order_dot" :href="'tel:' + order.communityPhone">联系网点</a>
                      </div>
                      </template>
                      <template v-else-if="order.isOrderSuccess === 'FAIL'">
                      <div class="order_list_top">{{order.createTime}}<span>商品查询结果</span></div>
                      <div class="order_box">
                        <div class="order_h3">{{order.brandName}} {{order.goodsName}} {{order.attrValue}}</div>
                        <div class="order_tips1">无法查找到此商品，请核对信息或联系网点</div>
                        <a class="order_dot" :href="'tel:' + order.communityPhone">联系网点</a>
                      </div>
                      </template>
                  </li>
                </ul>
                <div class="no-order" v-else-if="orderList&&orderList.length===0">您还没有{{typeName}}订单！</div>
              </template>
              </div>
              <div class="order_list" v-else>
                  <template v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="8">
                    <ul v-if="orderList&&orderList.length>0">
                        <li v-for="(order,index) in orderList" :key="order.ordersId">
                            <div class="order_list_top">{{order.createDate}}<span v-if="order.status === 'PUBLISHING_PROCUREMENT'">正在发布采买任务</span>
                                <span v-else-if="order.status === 'PROCURING'">商品采买中</span>
                                <span v-else-if="order.status === 'PROCURE_FINISHED'">采买完成</span>
                                <span v-else-if="order.status === 'DELIVERING'">配送中</span>
                                <span v-else-if="order.status === 'DELIVER_FINISHED' || order.status === 'FINISHED'">已完成</span>
                                <span v-else-if="order.status === 'CANCELED'">已取消</span>
                            </div>
                            <div class="order_goods clearfix" v-for="product in order.shoppingCarList" :key="product.goodsSkuId" @click="toView(order.ordersId)">
                                <img :src="product.goodsSkuImage">
                                <div class="order_h3">{{product.goodsName}}</div>
                                <div class="order_price">
                                    <ul>
                                        <li>最低价：{{product.minPrice}}元<span>{{product.minSupermarketName}}</span></li>
                                        <li>最高价：{{product.maxPrice}}元<span>{{product.maxSupermarketName}}</span></li>
                                    </ul>
                                </div>
                                <div class="goods_status"><template v-if="product.status === 'PROCURING'">采买中</template><template v-else-if="product.status === 'LACK'">缺货</template><template v-else-if="product.status === 'PRICE_HIGH'">价高未买</template><template v-else-if="product.status === 'BOUGHT'">已买</template><template v-else-if="product.status === 'WAIT_DEAL'">待采买</template></div>
                                <div class="order_spread">价差率：{{product.spreadRate}}</div>
                                <div class="order_num">数量：×{{product.quantity}}</div>
                                <div class="ord_total">合计：￥{{product.heJiPrice}}</div>
                            </div>
                            <div class="ord_all">实付：￥{{order.payPrice}}</div>
                            <template v-if="order.status === 'PUBLISHING_PROCUREMENT'">
                                <button class="order_btn_big btn_left" type="submit" @click="btnCancelOrder(index)">取消订单</button>
                                <a class="order_btn_big" :href="'tel:' + order.communityPhone">联系网点</a>
                            </template>
                            <template v-else-if="order.status === 'PROCURING'">
                                <a class="order_btn_big" :href="'tel:' + order.communityPhone">联系网点</a>
                            </template>
                            <template v-else-if="order.status === 'PROCURE_FINISHED'">
                                <a class="order_btn_big" :href="'tel:' + order.communityPhone">联系网点</a>
                            </template>
                            <template v-else-if="order.status === 'DELIVERING'">
                                <!--<button class="order_btn_sm btn_left" type="submit">拒收</button>-->
                                <button class="order_btn_big" type="submit" @click="btnConfirmlOrder(index)">确认收货</button>
                            </template>
                            <template v-else-if="order.status === 'DELIVER_FINISHED' || order.status === 'FINISHED'">
                                <!--<button class="order_btn_big btn_left" type="submit">退款售后</button>-->
                                <button class="order_btn_big" type="submit" @click="btnBuy(index)">再来一单</button>
                            </template>
                            <template v-else-if="order.status === 'CANCELED'">
                                <button class="order_btn_big" type="submit" @click="btnBuy(index)">重新购买</button>
                            </template>
                        </li>
                    </ul>
                    <div class="no-order" v-else-if="orderList&&orderList.length==0">您还没有{{typeName}}订单！</div>
                  </template>
              </div>
            </div>
          </transition>
        </div>
      </div>

      <div class="layer" v-show="dialogShow">
        <div class="layerbg"></div>
        <div class="layer-container">
          <div class="layer_tips" v-show="tipsShow">
            <h1>温馨提示</h1>
            <p v-html="tipsText"></p>
            <div class="layer_button">
              <span class="layer_cancel"><a @click="btnCancel()">取消</a></span><span class="layer_ok"><a @click="btnOk()">确定</a></span>
            </div>
          </div>
          <div class="layer_other" v-show="otherMarket">
            <h1>其它超市价格</h1>
            <h3>{{name}}</h3>
            <div class="market">
              <ul>
                <li v-for="market in marketlist" :key="market.markerName">{{market.supermarketName}}<span>{{market.price}}元</span></li>
              </ul>
            </div>
            <div class="rate">价差率：{{spreadRate}}%</div>
            <div class="buy_sure"><span @click="btnCancel()">确定</span></div>
          </div>
          <div class="layer_cart" v-show="cartShow">
            <h1>选择数量</h1><span class="layer_reduce" @click="btnReduce()"></span><h3>{{num}}</h3><span class="layer_plus" @click="btnPlus()"></span>
            <div class="layer_button"><span class="layer_cancel" @click="btnCancel()">取消</span><span class="layer_ok" @click="btnCartOk()">确定</span></div>
          </div>
        </div>
      </div>

      <div class="toast" v-show="errMsg"><span v-html="errMsg"></span></div>

    </div>

  <script src="../js/vue.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../js/fetch20190612.js"></script>
  <script type="text/javascript" src="../js/mint-ui/mint-ui.js"></script>
  <script src="./js/member_order201904111600.js"></script>
  <script src="../js/check.js"></script>

</body>

</html>
